import styled from "@emotion/styled"
import { Swiper, SwiperSlide } from "swiper/react"
import { RefGamePlatformListItem } from "@/apis/home_page_constant_types"
import { CategoryGameLabel } from "./CategoryGameLabel"
import { ProviderItem } from "./ProviderItem"
const ProviderContainer = styled.section`
    padding-top: 0;
    padding-bottom: 20rem;
`

const List = styled.div`
    .swiper-slide {
        display: flex;
        justify-content: center;
    }
`

export const Provider = ({ list = [] }: { list: RefGamePlatformListItem[] }) => {
    return (
        <ProviderContainer>
            <CategoryGameLabel showArrow={false}>Provider</CategoryGameLabel>
            <List>
                <Swiper
                    slidesPerView={3}
                    spaceBetween={"6rem"}
                    loop={false}
                    style={{
                        paddingLeft: "12rem",
                        paddingRight: "12rem",
                    }}
                >
                    {list.map((provider, idx) => {
                        return (
                            <SwiperSlide key={`provider_item_${idx}`}>
                                <ProviderItem
                                    to={`/s-game/provider/${provider.venue_id}_${provider.id}`}
                                    key={`provider_item_${idx}`}
                                    {...provider}
                                />
                            </SwiperSlide>
                        )
                    })}
                </Swiper>
            </List>
        </ProviderContainer>
    )
}
